<template>
  <div class="container">
    <div class="title">查找/替换</div>
    <div class="input-row">
      <el-input placeholder="请输入" size="medium">
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>
    </div>
    <div class="input-row">
      <el-input placeholder="替换为" size="medium" style="width: 100%"> </el-input>
    </div>
    <div>
      <el-checkbox>匹配大小写</el-checkbox>
      <el-checkbox>整词</el-checkbox>
    </div>
    <div class="btn-row">
      <el-button type="primary" size="small">替换</el-button>
      <el-button type="primary" size="small">全部替换</el-button>
    </div>
  </div>
</template>

<script>
export default {}
</script>
<style scoped>
/* 以下重复内容，可复用 */
.container {
  padding: 20px;
}

.title {
  font-size: 18px;
  font-weight: bold;
}
.input-row {
  margin: 10px 0;
}
.btn-row {
  margin: 10px 0;
  display: flex;
  justify-content: flex-end;
}
::v-deep .el-input__inner {
  appearance: none;
  background-color: #fff;
  background-image: none;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  color: #606266;
  display: inline-block;
  font-size: inherit;
  height: 40px;
  line-height: 40px;
  outline: none;
  padding: 0 15px;
  transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
}
::v-deep .el-input-group__append {
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
::v-deep .el-input-group__append {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;

  border-left: 0;
}
::v-deep .el-button {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #dcdfe6;
  color: #606266;
  appearance: none;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 0;
  transition: 0.1s;
  font-weight: 500;
  user-select: none;
  padding: 12px 20px;
  font-size: 14px;
  border-radius: 4px;
}

::v-deep .el-checkbox {
  color: #606266;
  font-weight: 500;
  font-size: 14px;
  position: relative;
  cursor: pointer;
  display: inline-block;
  white-space: nowrap;
  user-select: none;
  margin-right: 30px;
}
::v-deep .el-checkbox__input {
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  display: inline-block;
  line-height: 1;
  position: relative;
  vertical-align: middle;
}
::v-deep .el-checkbox__inner {
  display: inline-block;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 2px;
  box-sizing: border-box;
  width: 14px;
  height: 14px;
  background-color: #fff;
  z-index: 1;
  transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
    background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);
}
::v-deep .el-button--primary {
  color: #fff;
  background-color: #025da4;
  border-color: #025da4;
}
::v-deep .el-button--small {
  padding: 9px 15px;
  font-size: 12px;
  border-radius: 3px;
}
::v-deep .el-button + .el-button {
  margin-left: 10px;
}
</style>
